<template>
  <FormIndex ref="formRef" data-v-98b3e840="" class="content-wrap">
    <div data-v-98b3e840="" data-v-3682307e="" class="content-main">
      <div data-v-98b3e840="" data-v-3682307e="" class="content-title logo">
        为了更全面的保障您的财产安全，请配合完善您的实名信息
      </div>
      <div data-v-98b3e840="" data-v-3682307e="" class="content-from">
        <FormItem :rules="[{type:'required',message:'请输入姓名'}]" :value="name" data-v-98b3e840="" data-v-3682307e="" class="from-item">
          <span data-v-98b3e840="" class="label">姓名</span
          ><input v-model="name"
            data-v-98b3e840=""
            data-v-3682307e=""
            type="text"
            placeholder="请输入姓名"
            maxlength="11"
          />
        </FormItem>
        <FormItem :rules="[{type:'idCard'}]" :value="cardNo" data-v-98b3e840="" class="from-item">
          <span data-v-98b3e840="" class="label">身份证</span
          ><input v-model="cardNo"
            data-v-98b3e840=""
            placeholder="请输入身份证"
            type="text"
            style="width: 250px"
          />
        </FormItem>
      </div>
      <div @click="submit" data-v-98b3e840="" class="login-btn">确定</div>
    </div>
  </FormIndex>
</template>

<script setup>
    import FormIndex from '@/components/Form/index.vue'
    import FormItem from '@/components/Form/item.vue'
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    import request from '@/utils/request.ts'
    const formRef = ref();
    const name = ref("");
    const router = useRouter();
    const cardNo = ref("");
    const submit = async ()=>{
        let isValid = await formRef.value.validate()
        if(!isValid){
            request({
                url:'/App/api/promoterName',
                method:'POST',
                data:{
                    name:name.value,
                    cardNo:cardNo.value
                }
            }).then((res)=>{
                router.push('/home')
            })
        }
    }
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f5f9;
  overflow: hidden;
  font-size: 0.32rem;
}

.content-main {
  background-color: #fff;
  overflow: hidden;
}

.content-title {
  margin: 1.146667rem 0.826667rem 0;
  color: #222;
  font-size: 0.48rem;
  font-weight: 700;
}

.content-from {
  width: 8.906667rem;
  margin: 0.64rem auto 0;
}

.from-item {
  width: 8.266667rem;
  height: 1.28rem;
  margin: 0 auto 0.533333rem;
  position: relative;
  border-bottom: 0.026667rem solid #f3f3f3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.from-item .label {
  width: 1.973333rem;
  height: 1.28rem;
  line-height: 1.28rem;
  text-align: center;
  font-size: 0.426667rem;
  color: #222;
  font-weight: 700;
}

.from-item input {
  border: none;
  outline: none;
  transition: 0.3s;
  width: 4.666667rem;
  margin-left: 0.373333rem;
  font-size: 0.426667rem;
  border-radius: 0;
}

.send {
  position: absolute;
  font-size: 0.373333rem;
  color: #308dff;
  right: 0;
  top: 0.266667rem;
}

.login-btn {
  width: 8.266667rem;
  height: 1.306667rem;
  text-align: center;
  line-height: 1.306667rem;
  margin: 0.453333rem auto 0.32rem;
  border-radius: 0.133333rem;
  font-size: 0.48rem;
  font-weight: 700;
  background-color: #308dff;
  color: #fff;
  transition: 0.4s;
}

.agree {
  width: 8.266667rem;
  margin: 1.013333rem auto 0.72rem;
}
</style>